<template>
    <div class="page-box">
      <search-list-page
        ref="listPage"
        :searchFormConfig="searchFormConfig"
        :tableComponentConfig="tableComponentConfig"
      >
        <template #operateBtn>
          <a-button
            type="primary"
            @click="handleAdd"> 添加 </a-button>
        </template>
        <div
          slot="action"
          slot-scope="text, record">
          <SpaceDivider>
            <a @click="handleEdit(record)"> 编辑 </a>
            <a @click="handleDelete(record)"> 删除 </a>
          </SpaceDivider>
        </div>
      </search-list-page>
      <RecordInfo
        :mode="mode"
        v-model="recordInfoModalVisible"
        :recordInfo="recordInfo"
        @refresh="refreshTable"
      />
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Ref, Vue } from 'vue-property-decorator'
  
  import { pageList, delData } from '@/api/testApi'
  
  import RecordInfo from './components/recordInfo/index.vue'
  
  @Component({
    components: {
      RecordInfo,
    },
  })
  export default class PageList extends Vue {
    searchFormConfig = {
      queryList: `%queryList%`,
    };
  
    tableComponentConfig = {
      loadData: pageList,
      delData: delData,
      columns: `%columns%`,
      tableProps: `%tableProps%`,
    };
  
    recordInfo: any = {};
    mode: string = 'add';
    recordInfoModalVisible: boolean = false;
    // 添加
    handleAdd() {
      this.mode = 'add'
      this.recordInfo = {}
      this.recordInfoModalVisible = true
    }
  
    // 编辑
    handleEdit(record: any) {
      this.mode = 'edit'
      this.recordInfo = record
      this.recordInfoModalVisible = true
    }
  
    // 详情
    handlePreview(record: any) {
      this.mode = 'preview'
      this.recordInfo = record
      this.recordInfoModalVisible = true
    }
  
    // 删除操作
    handleDelete(record: any) {
      this.listPage.deleteRecord(
        record.id
        // `您确认要删除${record.name}`
      )
    }
  
    @Ref() listPage!: any;
    refreshTable() {
      this.listPage.refreshTable()
    }
  }
  </script>
  